<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .img {
            width: 600px;
            height: 400px;
            background: #fff;
            border: 1px solid #000;
            position: relative;
        }
        .img>div{
            position: absolute;
        }
        .img .img1{
            width: 63px;
            height: 0px;
            background: url(../img/about.png) -393px -92px;
            left: 393px;
            top: 92px;
            /*transform: translate(-100%,-100%) rotateZ(30deg);*/
        }
        .img:hover .img1{
            animation: key 1s steps(8) 1 1.2s forwards;
        }
        @keyframes key {
            from{
                height: 0px;
            }
            to{
                height: 117px;
            }
        }
        .img .img2{
            width: 65px;
            height: 100px;
            background: url(../img/about.png) -494px -87px;
            left: 494px;
            top: 87px;
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -ms-transform: scale(1.2);
            -o-transform: scale(1.2);
            transform: scale(1.2);
        }
        .img:hover .img2{
            animation: scale 1s ease infinite ;
        }
        .img .img3{
            width: 100px;
            height: 100px;
            background: url(../img/about.png) -306px -281px;
            left: 306px;
            top: 281px;
            transition: all 5s;
            transform-style: preserve-3d
        }
        .img:hover .img3{
            transform: rotateY(-180deg);
        }
        .img .img4{
            width: 49px;
            height: 50px;
            background: url(../img/about.png) -205px -82px;
            left: 205px;
            top: 82px;
            transition: all 3s ;
            transform-origin: center center;

        }
        .img:hover .img4{
            transform: rotate(360deg);
        }
        .img .img5{
            width: 52px;
            height: 51px;
            background: url(../img/about.png) -285px -33px;
            left: 285px;
            top: 33px;
            transition: all 5s ;
            transform-origin: right center;
        }
        .img:hover .img5{
            transform: rotate(360deg);
        }
        .img .img6{
            width: 17px;
            height: 25px;
            background: url(../img/about.png) -247px -342px;
            left: 247px;
            top: 342px;

        }
        .img:hover .img6{
            animation: move 2s  infinite ;
        }
        @keyframes move{
            from{
                top: 342px;
            }
            25%{
                top: 171px;
            }
            50%{
                top: 342px;
            }
            75%{
                top: 171px;
            }
            to{
                top: 342px;
            }

        }
        @keyframes scale {
            from{
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
            }
            50%{
                -webkit-transform: scale(0.8);
                -moz-transform: scale(0.8);
                -ms-transform: scale(0.8);
                -o-transform: scale(0.8);
                transform: scale(0.8);
            }
            to{
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
            }
        }
        /*.img:hover .img1{*/
            /*transition:all 1s linear;*/
            /*transform: translate(0,0) rotateZ(0deg);*/
        /*}*/
    </style>
</head>
<body>
    <div>
        <img src="../img/about.png" alt=""/>
    </div>
    <div class="img">
        <div class="img1"></div>
        <div class="img2"></div>
        <div class="img3"></div>
        <div class="img4"></div>
        <div class="img5"></div>
        <div class="img6"></div>
    </div>
</body>
</html>